<script setup>
import {reactive,ref} from 'vue';
import {loginAPI} from '@/api/user.js'
import { ElLoading, ElMessage } from 'element-plus';
import {useStore} from '@/store/counter.js'
import {useRouter} from 'vue-router'
const store = useStore()
const router = useRouter()
const formData = reactive({
    username:"",
    password:""
})
const rules = reactive({
    username:[
       {
            required:true,
            message:"必须输入用户名",
            trigger:'blur'
       }
   ],
    password:[
       {
            required:true,
            message:"必须输入密码",
            trigger:'blur'
       }
   ]
})
const isLoading = ref(false)
//获取整个form作为DOM对象，需要作为实参传入给发送按钮的点击方法
const ruleFormRef = ref(null);
    //发送表单信息的方法
const submitForm = (formEl) => {
    //验证是否由form表单传入，如果没有直接return打断函数的后续执行
    if(!formEl) return;
    // console.log(formData);
    
    //form表单域中有一个validate方法用来验证整个表单中的数据是否通过校验，并且传入一个回调
    //其中回调接收的第一个参数传入当前表单域中的所有表单数据是否通过校验，第二个参数传入的是没有通过验证的表单项数据
    formEl.validate(async (isValid,invalidFields) => {
        if(isValid){
            const loading = ElLoading.service({
                lock: true,
                text: '加载中...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            const res =await loginAPI(formData)
            console.log('res返回结果',res)
            loading.close()
            if(res.code == '200') {
                ElMessage({
                    type:'success',
                    message: res.msg
                })
                store.userInfo = formData
                store.token = res.data
                router.push('/home')
            }
            else {
                ElMessage({
                    type:'error',
                    message: "登录失败"
                })
                loading.close()
            }
            
           
       }else{
            ElMessage.error("请检查用户或密码是否正确")
            console.log(invalidFields)
            return false
       }
   })
}
 // 满天星效果
const options = {
  fpsLimit: 60,
  interactivity: {
    detectsOn: "canvas",
    events: {
      onClick: {
        // 开启鼠标点击的效果
        enable: true,
        mode: "push",
      },
      onHover: {
        // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: "grab",
      },
      resize: true,
    },
    modes: {
      // 配置动画效果
      bubble: {
        distance: 400,
        duration: 5,
        opacity: 0.8,
        size: 50,
      },
      push: {
        quantity: 4,
      },
      grab: {
        distance: 200,
        duration: 0.4,
      },
      attract: {
        // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 6,
      },
    },
  },
  particles: {
    color: {
      value: "yellow", // 粒子点的颜色
    },
    links: {
      color: "#FFBBFF", // 线条颜色
      distance: 150, //线条距离
      enable: true,
      opacity: 0.4, // 不透明度
      width: 1.5, // 线条宽度
    },
    collisions: {
      enable: true,
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: "none",
      enable: true,
      out_mode: "out",
      random: false,
      speed: 0.5, // 移动速度
      straight: false,
    },
    number: {
      density: {
        enable: true,
        value_area: 800,
      },
      value: 80, //粒子数
    },
    opacity: {
      //粒子透明度
      value: 0.7,
    },
    shape: {
      //粒子样式
      type: "star",
    },
    size: {
      //粒子大小
      random: true,
      value: 3,
    },
  },
  detectRetina: true,
};
</script>
 
<template>
  <div class="login">
    <Particles id="tsparticles" class="login__particles" :options="options" />
 
    <div class="loginPart">
      <h2>用户登录</h2>
      <el-form
        :model="formData"
        ref="ruleFormRef"
        :rules="rules"
        label-width="100px"
        style="transform: translate(-30px)"
      >
        <el-form-item label="账号" prop="username">
          <el-input
            v-model="formData.username"
            placeholder="请输入账号/邮箱"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            type="password"
            v-model="formData.password"
            placeholder="请输入密码"
            show-password
            clearable
          ></el-input>
        </el-form-item>
 
        <el-button
          class="btn"
          type="primary"
          @click="submitForm(ruleFormRef)"
          auto-insert-space
          @keyup.enter="submitForm(ruleFormRef)"
          >登录</el-button
        >
      </el-form>
    </div>
  </div>
</template>
 
<style lang="scss" scoped>
.login {
  height: 100%;
  width: 100%;
  background-color: #2954AF;
  overflow: hidden;
}
 
.login__particles {

  width: 100vw;
  height: 100vh;

  background: url('@/assets/login-bg.svg') no-repeat;
  background-position: right top;
  background-size: cover;
  opacity: 0.9;
  position: fixed;
  pointer-events: none;
}
 
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 80%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(241, 236, 241, 0.3);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
    将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}
 
h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}
 
.btn {
  // transform: translate(170px);
  width: 80%;
  margin: 10px 20%;
  height: 40px;
  font-size: 15px;
}
</style>



